<template>
  <div>
    <div class="main-content">
      <div style="width: 100%">
        <el-form
          :model="searchForm"
          ref="searchFormRef"
          size="mini"
          :rules="rules"
          :disabled="jobStatus == 300"
          :inline="true"
        >
          <div v-if="isNeedDate">
            <el-form-item label="评价年度起止" prop="startTime">
              <el-date-picker
                v-model="searchForm.startTime"
                align="right"
                type="year"
                placeholder="选择开始日期"
                :picker-options="pickerOptions"
                value-format="yyyy"
                format="yyyy"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>-</el-form-item>
            <el-form-item prop="endTime">
              <el-date-picker
                v-model="searchForm.endTime"
                align="right"
                type="year"
                placeholder="选择结束日期"
                :picker-options="pickerOptions"
                value-format="yyyy"
                format="yyyy"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                size="mini"
                @click="getList('searchFormRef')"
                >查询</el-button
              >
            </el-form-item>
          </div>
        </el-form>

        <success
          v-if="jobStatus == 200 && canpanyInfoLength == 0 && !showFlag"
        ></success>
        <faile @goOut="goOut" v-if="jobStatus == 300"></faile>
        <el-empty v-if="showFlag" description="暂无数据"></el-empty>
        <div v-if="jobStatus == 200 && canpanyInfoLength > 0">
          <div>
            <div class="title-one">纳税人基本信息</div>
            <div class="person-msg">
              <div class="msg-item">
                <div class="msg-item-s bordernone">
                  <div class="table-item">统一社会信用代码</div>
                  <div style="border-top: none" class="table-item">
                    {{ canpanyInfo.creditCode ? canpanyInfo.creditCode : "-" }}
                  </div>
                </div>
                <div class="msg-item-s bordernone">
                  <div class="table-item">法定代表人</div>
                  <div class="table-item">
                    {{
                      canpanyInfo.legalPerson ? canpanyInfo.legalPerson : "-"
                    }}
                  </div>
                </div>
              </div>
              <div class="msg-item">
                <div class="msg-item-s">
                  <div class="table-item">税务登记日期</div>
                  <div class="table-item">
                    {{
                      canpanyInfo.taxRegister ? canpanyInfo.taxRegister : "-"
                    }}
                  </div>
                </div>
                <div class="msg-item-s">
                  <div class="table-item">主营税务机关</div>
                  <div class="table-item">
                    {{ canpanyInfo.taxOffices ? canpanyInfo.taxOffices : "-" }}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="title-one mt10">评价结果信息</div>
          <div class="mt10" style="width: 800px">
            <el-table :data="canpanyInfo.creditEvaluationList" border>
              <el-table-column
                prop="evaluationYear"
                label="评价年度"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="evaluationScore"
                label="评价得分"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="evaluationResult"
                label="评价结果"
                width="180"
              >
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="openDia(scope.row)"
                    size="small"
                    >明细</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>

      <yearResultVue ref="detailRef"></yearResultVue>
    </div>
  </div>
</template>

<script>
import {
  getCreditStatusInfo,
  getAnnualEvaluationResultsDetail,
} from "@/api/tax";
import success from "../../../components/status/success.vue";
import faile from "../../../components/status/faile.vue";
import { timeFun } from "../../../utils/date";
import yearResultVue from "./yearResult.vue";
export default {
  components: {
    success,
    faile,
    yearResultVue,
  },
  props: {
    jobActive: {
      type: String,
      default: "查询任务",
    },
    jobStatus: {
      type: Number,
      default: null,
    },
    isNeedDate: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    canpanyInfoLength() {
      return Object.keys(this.canpanyInfo).length;
    },
  },
  created() {
    this.showFlag = false;
  },
  watch: {
    jobActive: {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          this.searchForm = {
            startTime: "",
            endTime: "",
          };
          this.detailInfo = {};
          this.canpanyInfo = {};
        }
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      // 验证规则
      rules: {
        startTime: [
          {
            type: "string",
            required: true,
            message: "请选择缴款日期开始时间",
            trigger: "change",
          },
        ],
        endTime: [
          {
            type: "string",
            required: true,
            message: "请选择缴款日期结束时间",
            trigger: "change",
          },
        ],
      },
      //弹框详情
      detailInfo: {},
      // 弹框二级详情
      taxCreditEvaluationRecordsVo: {},
      // 日期配置
      pickerOptions: {
        disabledDate(time) {
          // 获取三年前的今天和昨天的日期
          const threeYearsAgo = new Date();
          threeYearsAgo.setFullYear(threeYearsAgo.getFullYear() - 3);
          threeYearsAgo.setHours(0, 0, 0, 0);

          const yesterday = new Date();
          yesterday.setDate(yesterday.getDate() - 1);
          yesterday.setHours(0, 0, 0, 0);

          // 比较日期是否在三年前的今天和昨天之外
          return (
            time.getTime() < threeYearsAgo.getTime() ||
            time.getTime() > yesterday.getTime()
          );
        },
      },
      dialogVisible: false,
      //查询表单
      searchForm: {
        startTime: "",
        endTime: "",
      },

      tableData2: [],
      // 公司信息数据
      canpanyInfo: {},
      showFlag: false,
    };
  },
  methods: {
    //退出
    goOut() {
      this.$emit("goOut", 1);
    },
    //查询列表
    getList(formName) {
      // console.log('pp');
      if (this.jobStatus == 300) {
        return this.$message.error("请您输入企业信息后重新查询哦");
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.searchList();
        } else {
          return false;
        }
      });
    },
    // 发起请求
    searchList() {
      let params = {
        enterpriseId: this.jobActive,
        startTime: this.searchForm.startTime,
        endTime: this.searchForm.endTime,
      };
      if (this.isNeedDate) {
        if (!timeFun(params.startTime, params.endTime)) {
          return this.$message.error("结束时间必须大于开始时间哦");
        }
      }
      if (
        params.startTime &&
        params.endTime &&
        !timeFun(params.startTime, params.endTime)
      ) {
        return this.$message.error("结束时间必须大于开始时间");
      }
      getCreditStatusInfo(params).then((res) => {
        if (res.data.creditEvaluationList.length == 0) {
          this.$message.error("抱歉，暂时没有查到纳税信用哦");
          this.showFlag = true;
          this.canpanyInfo = {};
          return false;
        } else {
          this.showFlag = false;
        }
        this.canpanyInfo = res.data;
      });
    },

    /**
     * 打开对话框
     * @param v 传递给对话框的参数，用于对话框的初始化或配置
     * 该方法通过引用方式调用组件内的detailRef对象的openDia方法，
     * 从而实现打开对话框的功能，并且可以向对话框传递参数v。
     */
    openDia(v) {
      this.$refs.detailRef.openDia(v);
    },
    /**
     * 处理对话框关闭操作。
     * 该函数重置了taxCreditEvaluationRecordsVo对象，并隐藏了对话框。
     * 参数：无
     * 返回值：无
     */
    handleClose() {
      this.taxCreditEvaluationRecordsVo = {}; // 重置税务信用评价记录对象
      this.dialogVisible = false; // 隐藏对话框
    },
        /**
     * 重置表单字段的值为初始状态。
     * 这个方法主要用于清空表单的输入字段，将其恢复到初始状态。
     * 调用此方法后，表单的所有字段都将被重置，相当于用户没有进行任何输入。
     */
    restFormValite() {
      this.$refs.searchFormRef.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.bordernone {
  border-bottom: none !important;
}
.mt10 {
  margin-top: 10px;
}
.title {
  text-align: center;
  font-weight: bold;
}
.main-content {
  display: flex;
  // justify-content: center;
  // margin-top: 20px;
}
.title-one {
  font-weight: bold;
  font-size: 14px;
  padding-left: 5px;
  border-left: 4px solid #409eff;
}
.person-msg {
  margin-top: 20px;
  .msg-item {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    width: 100%;
    > div {
      &:nth-child(1) {
        border-right: none;
      }
      &:nth-child(2) {
      }
    }
    .msg-item-s {
      width: 100%;
      display: flex;
      align-items: center;
      border: 1px solid #ccc;
      white-space: nowrap;
      > div {
        &:nth-child(1) {
          width: 35%;
          border-right: 1px solid #ccc;
        }
        &:nth-child(2) {
          width: 65%;
          background-color: #f5f5f5;
        }
      }
      .table-item {
        width: 100%;
        padding: 10px;
        // margin-right: 20px;
      }
    }
  }

  .msg-items1 {
    width: 100%;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;

    > div {
      padding: 10px;
      &:nth-child(1) {
        width: 25%;
        border-right: 1px solid #ccc;
      }
      &:nth-child(2) {
      }
    }
  }
}
</style>